<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery1.9.0.min.js"></script>
<script src="${pageContext.request.contextPath }/js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jQuery-jcDate.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/jcDate.css" media="all" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/xcConfirm.css"/>
<script type="text/javascript">
	$(document).ready(function(){
		showClientOpinion();
		//日期选择器的方法
		$("input.jcDate").jcDate({					       
			IcoClass : "jcDateIco",
			Event : "click",
			Speed : 100,
			Left : 0,
			Top : 28,
			format : "-",
			Timeout : 100
        });
	});
	
	//点击查询操作
	function query(){
		$("#css-operation").val("query");
		showClientOpinion();
	}
	
	//点击详情
	function detail(id){
		var txt = id;
		window.wxc.xcConfirm(txt);
	}
	
	//点击删除操作
	function deleteclientOpinion(id){
		$("#evalId").val(id);
		$.ajax({
   			url:'deletClientOpinionAction.action',//请求的远程url
   			data:$("#actionForm").serialize(),//发送到服务器的数据
   			type:"POST",//默认值: "GET")。请求方式 ("POST" 或 "GET")
   			dataType:"json",//服务器返回的数据类型，有几种返回类型：xml,html,script,json,text(默认)
   			success:function(data){ //请求成功后的回调函数
   				var jsonMap = eval("(" + data + ")");
   			    var res = jsonMap.res;
   			    if(res == true){
   			    	showClientOpinion();
   			    	var txt=  "删除成功";
					window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.success);
   			    }else{
   			    	var txt=  "删除失败";
					window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.error);
   			    }
   			}
   		});
	}
	
	//分页效果、鼠标触发事件
	function operation(id){
		//首页
		if(id == "css-firstPage"){
			if($("#css-pageIndex").text() == "1"){
				//alert("这已是首页");
				$("#a-first").href = "javascript:return false;"
			}else{
				$("#css-page").val("1");
				showClientOpinion();
			}
		}
		//上一页
		if(id == "css-beforePage"){
			if($("#css-pageIndex").text() == "1"){
		    	var txt = "这已经是首页";
		    	window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.info);
				//alert("这已是首页");
			}else{
				var pageIndex = $("#css-page").val() - 1;
				$("#css-page").val(pageIndex);
				showClientOpinion();
			}
		}
		//下一页
		if(id == "css-nextPage"){
			if($("#css-pageIndex").text() == $("#css-pageCount").html()){
				var txt = "这已经是末页";
		    	window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.info);
				//alert("这已是末页");
			}else{
				var pageIndex = Number($("#css-page").val());
				var nextPage = pageIndex + 1;
				
				$("#css-page").val(nextPage);
				showClientOpinion();
			}
		}
		//末页
		if(id == "css-lastPage"){
			if($("#css-pageIndex").text() == $("#css-pageCount").html()){
				$("#a-last").href = "javascript:return false;"
			}else{
				$("#css-page").val($("#css-pageCount").html());
				showClientOpinion();
			}
		}
		
	}
	
	
	//与后台交互的ajax
	function showClientOpinion(){
   		$.ajax({
   			url:'showClientOpinionAction.action',//请求的远程url
   			data:$("#actionForm").serialize(),//发送到服务器的数据
   			type:"POST",//默认值: "GET")。请求方式 ("POST" 或 "GET")
   			dataType:"json",//服务器返回的数据类型，有几种返回类型：xml,html,script,json,text(默认)
   			success:function(data){ //请求成功后的回调函数
	   			var jsonMap = eval("(" + data + ")");   
	   			var pageBean = jsonMap.pageBean;
	            if(pageBean != null){
	            	var list = pageBean.list;
	            	if(list.length > 0){
	   			    	for (i in list) { 
	   			    		if(i%2 != 0){
	   			    			str += "<tr style='background-color: #CCFFCC'>" +  
		                        "<td>" + list[i].evalid + "</td>" +  
		                        "<td>" + list[i].cname + "</td>" +
		                        "<td>" + list[i].evaltime + "</td>" +
		                        "<td class='chaxun-td'><a id=" + list[i].evalcontment + " href='#' onclick='detail(id)' class='edit-a'>详情</a></td>" +  
		                        "<td class='chaxun-td'><a id=" + list[i].evalid + " href='#' onclick='deleteclientOpinion(id)' class='edit-a'>删除</a></td>" +  
		                        "</tr>";
	   			    		}else{
	   			    			str += "<tr style='background-color: #CCFFFF'>" +  
		                        "<td>" + list[i].evalid + "</td>" +  
		                        "<td>" + list[i].cname + "</td>" + 
		                        "<td>" + list[i].evaltime + "</td>" +
		                        "<td class='chaxun-td'><a id=" + list[i].evalcontment + " href='#' onclick='detail(id)' class='edit-a'>详情</a></td>" +  
		                        "<td class='chaxun-td'><a id=" + list[i].evalid + " href='#' onclick='deleteclientOpinion(id)' class='edit-a'>删除</a></td>" +  
		                        "</tr>";
	   			    		}
	   			      }
	   			    $("#css-tbody").html(str);
	   			    }else{
	   			    	var str = "<tr><td colspan='7'>没有匹配到结果</td></tr>"
	   			    	$("#css-tbody").html(str);
	   			    }
   			    	$("#css-chaxundiv").show();
   			    	$("#css-tablediv").show();
   			    	$("#css-totalCount").html(pageBean.totalCount);
   			    	$("#css-pageIndex").html(pageBean.pageIndex);
   			    	$("#css-pageCount").html(pageBean.pageCount);
	            }
   			}
   		});
	}
</script>
<style type="text/css">
  div{margin-bottom: 40px;margin-top: 20px;}
  thead{background: url(${pageContext.request.contextPath }/img/thead.png)}
  input{height: 35px;}
  td{text-align: center;height:35px; }
  .chaxun-td{background-image:url(${pageContext.request.contextPath }/img/chacunclick.png) }
  .label-class{background-image:url(${pageContext.request.contextPath }/img/chaxun.png) }
  .edit-a{color: #000000}
  #form{top: 10%;left: 10%;width: 20%;height: 30%}
  a{text-decoration: none;color: #FFFFFF}
</style>
</head>
<body>
    <div>
	    <form id="actionForm" method="post">
	    <input type="hidden" id="evalId"  name="evalid" value=""/>
	    <input type="hidden" id="css-operation"  name="operation" value=""/>
		    <div id="css-chaxundiv">
		        <table width="100%">
		          <tr>
		             <td><label>起始日期:</label></td>
                     <td><input  class="jcDate " style="width:200px; height:20px; line-height:20px; padding:4px;" type="text" name="startDate" placeholder="请选择起始日期......" /></td>
                     <td><label>截止日期:</label></td>
                     <td><input  class="jcDate " style="width:200px; height:20px; line-height:20px; padding:4px;" type="text" name="endDate" placeholder="请选择截止日期......" /></td>
		             <td class="chaxun-td"><label onclick="query()"><a href="#">搜索</a></label></td>
		          </tr>
		        </table>   
		    </div>
		    
		    <div id="css-tablediv" style="display: none">
			    <input id="css-page" name="pageIndex" type="hidden" value="1" >
				<table id="css-table" border="0" width="100%">
				  <thead>
				    <tr>
				      <th width="20%">编号</th>
				      <th width="20%">用户姓名</th>
				      <th width="20">评价时间</th>
				      <th width="20">评价内容</th>
				      <th width="20%">操作</th>
				    </tr>
				  </thead>
				  <tbody id="css-tbody">
				  </tbody>
				  <tfoot>
				    <tr>
				      <td colspan="7">
				        <label id="css-firstPage" class="label-class" onclick="operation(id)"><a id="a-first" href="#">首页</a></label>|
				        <label id="css-beforePage" class="label-class" onclick="operation(id)"><a href="#">上一页</a></label>|
				        <label id="css-nextPage" class="label-class" onclick="operation(id)"><a href="#">下一页</a></label>|
				        <label id="css-lastPage" class="label-class" onclick="operation(id)"><a id="a-last" href="#">尾页</a></label>|
				                     共<label id="css-totalCount"></label>记录|
				                     当前第<label id="css-pageIndex"></label>页|
				                     共<label id="css-pageCount"></label>页   
				      </td>
				    </tr>
				  </tfoot>
				</table>
		    </div>
	    </form>
    </div>
</body>
</html>